import React, { Component } from 'react'
import {
  Header, Form, TextArea, Input, Grid, Dropdown, Popup,
} from 'semantic-ui-react'
import { SketchPicker } from 'react-color'

export default class componentName extends Component {
  randomHexColor = () => {
    // 随机生成十六进制颜色
    let hex = Math.floor(Math.random() * 16777216).toString(16) // 生成ffffff以内16进制数
    while (hex.length < 6) {
      // while循环判断hex位数，少于6位前面加0凑够6位
      hex = `0${hex}`
    }
    return `#${hex}` // 返回‘#'开头16进制颜色
  }

  changeColor = (color) => {
    const c = {
      hex: color.hex,
      state: 'normal',
      message: '',
    }
    this.setState({ color: c })
  }

  render() {
    const rcolor = this.randomHexColor()
    return (
      <Grid>
        <Grid.Column width={4} />
        <Grid.Column width={8}>
          <Header as="h2" dividing>
            新建标注类别
          </Header>
          <div style={{ marginTop: '2em' }}>
            <Form>
              <Form.Field required>
                <label>名字</label>
                <Input fluid onChange={this.on_change_name} />
              </Form.Field>
              <Form.Field>
                <label>说明</label>
                <TextArea fluid rows="3" onChange={this.on_change_bio} />
              </Form.Field>
              <Popup
                trigger={(
                  <Form.Field width={5}>
                    <Input
                      label={{ style: { backgroundColor: rcolor, width: '4em' } }}
                      labelPosition="right"
                      type="text"
                      onChange={this.on_change_color_input}
                      value={rcolor.toUpperCase()}
                      fluid
                    />
                  </Form.Field>
)}
                on="focus"
                hideOnScroll
              >
                <Popup.Content>
                  <SketchPicker color={rcolor} onChangeComplete={this.on_change_color} />
                </Popup.Content>
              </Popup>
            </Form>
          </div>
        </Grid.Column>
        <Grid.Column width={4} />
      </Grid>
    )
  }
}
